<template>
	<view class="nav-box" :style="[{ height: NavBar.height + 'px', background: bgColor, opacity },navStyle]" :class="{ 'js-nav-fixed': fixed }">
		<!-- 自定义导航栏 -->
		<view class="status_bar" :style="{ height: NavBar.statusBarHeight + 'px' }">
			<!-- uni-ui这里是状态栏 -->
		</view>
		<!-- 胶囊位置信息 -->
		<view class="nav-main" :style="[{ height: NavBar.navBarHeight + 'px' }]">
			<view class="nav-main-back" @click="back" v-if="backIcon">
				<u-icon name="arrow-left" size="26" :color="fontColor"></u-icon>
			</view>
			<text class="nav-main-title" :class="{ 'fix-c-x': center }" :style="[{ color: fontColor, fontWeight: 'bold', 'font-size': '34rpx' }, titleStyle]">{{ title }}</text>
			<image :src="img" mode="heightFix"></image>
			<!--  -->
			<view v-if="showEdit" @click="handleEdit" class="fix-c-y nav-active" :style="{right: `${NavBar.menuButtonRect.width + 30}px` }" >
				 <text v-if="edit" style="color: #E54E4E;">完成</text>
				 <text v-else>编辑</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		bgColor: { type: String, default: 'transparent' },
		backIcon: { type: Boolean, default: false },
		title: { type: String, default: '' },
		fixed: { type: Boolean, default: true },
		opacity: { type: Number, default: 1 },
		img: { type: String, default: '' },
		titleStyle: Object,
		edit:{ type: Boolean, default: false },
		showEdit:{ type: Boolean, default: false },
		fontColor:{ type: String, default: '#fff' },
		navStyle:Object,
		center: { type: Boolean, default: false }
	},
	data() {
		return {
			NavBar: this.$store.state.NavBar,
			bj:false
		};
	},
	mounted() {
	},
	methods: {
		//返回
		handleEdit(){
			this.$emit('handleEdit')
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style lang="less" scoped>
.nav-box {
	transition: 0.3s all;
}
.js-nav-fixed {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 155;
	width: 100%;
}
.status_bar {
	width: 100%;
}
.nav-active{
	font-size: 32rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: bold;
	color: #000000;
	.j-active();
}
/* #ifdef MP-WEIXIN */
.nav-main {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 32rpx;
	.nav-main-back {
		// position: absolute;
		// z-index: 156;
		// left: 10rpx;
	}
	.nav-main-title {
		display: block;
		white-space: nowrap;
		font-size: 34rpx;
		color: #ffffff;

		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold !important;
		color: #000000;
	}
	image {
		height: 70%;
	}
}
/* #endif */
/* #ifdef H5 */
.nav-main {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 32rpx;
	image {
		height: 70%;
	}
	.nav-main-back {
	}
	.nav-main-title {
		font-size: 34rpx;
		color: #ffffff;
		white-space: nowrap;
	}
}
/* #endif */
</style>
